<template>
	<view>
		<!-- #ifdef APP-PLUS -->
		<view>
			<uni-nav-bar left-icon="arrowleft" @clickLeft="back" title="我的团队" :statusBar='true' :fixed="true"></uni-nav-bar>
		</view>
		<!-- #endif -->
		<view class="mytram">
			<view v-if="(list !== undefined) && list.length" class="mytram-list">
				<block :key="item.id" v-for="item of list">
					<view class="mytram-list-item">
						<image class="mytram-list-item-img" src="" mode=""></image>
						<view class="mytram-list-item-info">
							<text class="mytram-list-item-info-name">队员昵称：{{ item.nickname }}</text>
							<text class="mytram-list-item-info-time">注册时间：{{ item.createdAt }}</text>
						</view>
					</view>
				</block>
			</view>
			<view v-else class="mytram-nolist">
				<image class="mytram-nolist-img" :src="commonImg('nolist.png')" mode=""></image>
				<text class="mytram-nolist-txt">暂无团队</text>
			</view>
		</view>
	</view>
</template>

<script>
	import { config } from '@/utils/config.js'
	import { myMixin } from '@/utils/mixin.js'
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'

	export default {
		mixins: [myMixin],
		components: {
			uniNavBar
		},
		data() {
			return {
				page: 1,
				size: 10,
				total: 0,
				totalPage: 0,
				list: []
			}
		},
		onLoad() {
			const token = uni.getStorageSync('token')
			if (!token) {
				uni.showToast({
					icon: 'none',
					title: '尚未登录, 请先登录'
				})
				setTimeout(() => {
					uni.removeStorageSync('role')
					uni.removeStorageSync('memberId')
					uni.removeStorageSync('token')
					uni.removeStorageSync('openId')
					uni.reLaunch({
						url: '../verificationcodelogin/verificationcodelogin'
					})
				}, 777)
				return false
			}
			this.findListPage()
		},
		methods: {
			back() {
				uni.navigateBack({})
			},
			findListPage() {
				uni.showLoading({ title: '加载中' })
				const page = this.page;
				const size = this.size
				uni.request({
					url: `${config.api_base_url}member/member/myTeam/${page}/${size}`,
					header: {
						'AUTH': 'ROBOT ' + uni.getStorageSync('token'),
						'Content-Type': 'application/json'
					},
					success: ((res) => {
						let { status, data } = res.data
						if (status.flag === true) {
							this.total = data.total
							this.totalPage = this.pageTotal(this.total, this.size)
							this.list = this.list.concat(data.rows)
						} else {
							this.list = []
						}
					}),
					fail: (res) => {
						uni.showToast({
							title: "网络异常, 请求失败",
							icon: "none"
						});
					},
					complete: (() => {
						uni.stopPullDownRefresh()
						uni.hideLoading()
					})
				});
			},
			pageTotal(rowCount, pageSize) {
				if (rowCount === null || rowCount === "") {
					return 0;
				} else {
					if ((pageSize !== 0) && (rowCount % pageSize === 0)) {
						return parseInt(rowCount / pageSize)
					}
					if ((pageSize !== 0) && (rowCount % pageSize !== 0)) {
						return parseInt(rowCount / pageSize) + 1
					}
				}
			}
		},
		//下拉刷新
		onPullDownRefresh() {
			this.page = 1
			this.size = 10
			this.total = 0
			this.totalPage = 0
			this.list = []
			this.findListPage()
		},
		//上滑加载
		onReachBottom() {
			const page1 = this.page + 1
			const totalPage = this.totalPage
			if (page1 <= totalPage) {
				this.page = page1
				this.findListPage()
			} else {
				uni.showToast({
					title: '已经到底部了',
					icon: 'none'
				})
			}
		},
	}
</script>
<style>
	page {
		background-color: #F7F4F8;
	}
</style>
<style scoped>
	.mytram {
		width: 100%;
		box-sizing: border-box;
		padding-top: 16rpx;
		padding-left: 16rpx;
		padding-right: 14rpx;
	}

	.mytram-list {
		width: 100%;
		display: flex;
		flex-direction: column;
	}

	.mytram-list-item {
		width: 100%;
		height: 160rpx;
		background-color: #fff;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		padding-left: 26rpx;
		margin-bottom: 16rpx;
	}

	.mytram-list-item:last-child {
		margin-bottom: 0;
	}

	.mytram-list-item-img {
		width: 110rpx;
		height: 110rpx;
		border-radius: 50%;
		background-color: #eee;
	}

	.mytram-list-item-info {
		margin-left: 28rpx;
		display: flex;
		flex-direction: column;
	}

	.mytram-list-item-info-name {
		font-size: 28rpx;
		line-height: 40rpx;
		font-weight: 500;
		color: rgba(0, 0, 0, 0.85);
	}

	.mytram-list-item-info-time {
		color: #999;
		line-height: 40rpx;
		font-size: 28rpx;
		font-weight: 500;
	}
	.mytram-nolist {
		width: 100%;
		display: flex;
		align-items: center;
		flex-direction: column;
		box-sizing: border-box;
		padding-top: 387rpx;
	}
	.mytram-nolist-img {
		width: 316rpx;
		height: 272rpx;
		margin-bottom: 47rpx;
	}
	.mytram-nolist-txt {
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 25rpx;
		color: #CFCFCF;
	}
</style>
